<!-- 
  1. 如何在setup中使用store中的数据？
     1. 引入useStore方法 从vuex
     2. 在setup函数中调用useStore() -> store实例对象 
        (store.state.模块名.属性名)
        (store.commit/ store.dispatch)
      
     3. 如果在模板中需要用和计算属性配合
        const list = computed(()=>{
          return store.state.模块名.属性
        })

  2. 吸顶交互的实现思路？
     核心思路：基于scroll事件 在事件的回调函数中 获取滚动距离 根据滚动距离是否满足条件
     让盒子控制是否显示(固定)

     选项式API
       mounted  
       window.addEventListener('scroll',()=>{
          // 判断滚动距离
          const top = document.documentElement.scrollTop
          if(top > 78){
            show类名显示
          }else{
            show类名不显示
          }
       })

     组合式API
       vueuse -> useWindowScroll() -> { x, y}
       y: 直接拿到当前距离顶部的滚动距离  并且这是一个响应式的ref对象
          如果在模板中我们使用了y,那每次y变化 视图都会更新

       模板 ->  :class="{ show: y > 78}"


  3. vueUse封装了什么？
     
     可复用的逻辑

     这个逻辑指的是：当滚动行为发生时 得到一个响应式的数据,这个数据指的就是距离浏览器顶部的距离

     可复用的逻辑：一个响应式数据 + 操作响应式的数据的行为

     结论：封装的是一个个包含了和业务不强相关的可复用的逻辑函数 
           产出的都是响应式的数据（ref对象）

  4. vueUse使用的注意事项
     每一个逻辑函数执行完毕之后 返回值的类型是什么？ ref对象 ref对象.value
     当返回值不止一个的时候  必须搞清楚每个ref对象代表什么意思
 -->
